<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>layui</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="lib/layui/css/layui.css" />
	<link rel="stylesheet" href="static/css/defaultpage.css" />
	<link rel="stylesheet" href="static/css/weadmin.css">
	<link rel="stylesheet" href="pages/canc-classManagement/SyntaxHighlighter-3.0.83/formSelects-v4.css" />


	<!--<script src="static/js/defaultpage.js" type="text/javascript" charset="utf-8"></script>-->
</head>

<body>

<div id="dgSubject" class="dgSubject">

	<h2></h2>
	<div class="weadmin-body dgSubject-right" style="width:99%;margin-left:10px;height:2000px;">
		<!--<select name="choose" id="chooseId1">
            <option value="1">按会话总数</option>
            <option value="2">按活跃用户数</option>
            <option value="3">按无效回复数</option>
            <option value="4">按总计</option>
        </select>-->
		<form class="layui-form" action="">
			<!--班级ID
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label"><span class="require-icon">*</span>班级</label>
                <div class="layui-inline">
                    <select class="layui-input classId" name="classId"  multiple="multiple" xm-select="method-value-example1">
                        <option value="">请选择班级</option>
                    </select>
                </div>
            </div>-->

			<!--实操课编号-->
			<!--<div class="layui-form-item layui-inline check-type courseType-2">
                <label class="layui-form-label" style="width: auto;"><span class="require-icon">*</span>实操课编号</label>
                <div class="layui-inline">
                    <select id="code" class="layui-input code1" name="code2"  xm-select="method-value-example2">
                        <option  value="000" >请选择实操课编号</option>
                    </select>
                </div>
            </div>-->

			<!--

            <div class="layui-form-item layui-inline check-type courseType-2">
               <label class="layui-form-label" style="width: 100px;">实操课编号：</label>
               <div class="layui-form layui-col-md6" lay-filter="hm2">
             <div class="layui-input-inline" style="width: 100px;">
                  <select id="code" class="layui-input code1" >
                     <option  value="" >请选择实操课编号</option>
                  </select>
               </div>
            </div>


            <div class="layui-form-item layui-inline">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addClass" id="registStudent">立即添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>-->
		</form>


       <div id="main" style="width: 100%;height:33%;"></div>
		<div id="main2" style="width: 100%;height:33%;"></div>
        <!--<div class="layui-form-item layui-inline check-type courseType-2">
               <label class="layui-form-label" style="width: 100px;">学员名称：</label>
               <div class="layui-form layui-col-md6" lay-filter="hm2">
             <div class="layui-input-inline" style="width: 200px;">
                  <select id="codes" class="layui-input code1"  style="padding-right: 20px;">
                     <option id="valcode"  value="" >请输入学员名称</option>
                  </select>
               </div>

            </div>
        </div>-->

        <!--<div id="main3" style="width: 100%;height:33%;"></div>-->
	</div>
	<script src="static/js/echarts.js"></script>
	<script src="static/js/jquery.1.11.1.js" type="text/javascript"></script>
	<script src="static/js/public.js"></script>
	<script src="lib/layui/layui.js" charset="utf-8"></script>
	<script src="pages/canc-classManagement/SyntaxHighlighter-3.0.83/formSelects-v4.js"></script>
	<script type="text/javascript">
        // var paths='http://192.168.1.114:8083'
        //	多选实操课编号，框架
        layui.formSelects.value('method-value-example1');
        layui.formSelects.value('method-value-example2');
        //			获取实操课编号
        getOperation();
        //			获取所有班级ID
        queryClasses();
        //矩形图
        var dom = document.getElementById("container");
        var myChart = echarts.init(main);
        var app = {};
        option = null;
        var posList = [
            'left', 'right', 'top', 'bottom',
            'inside',
            'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
            'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
        ];

        app.configParameters = {
            rotate: {
                min: -90,
                max: 90
            },
            align: {
                options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                }
            },
            verticalAlign: {
                options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                }
            },
            position: {
                options: echarts.util.reduce(posList, function (map, pos) {
                    map[pos] = pos;
                    return map;
                }, {})
            },
            distance: {
                min: 0,
                max: 100
            }
        };

        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                var labelOption = {
                    normal: {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    }
                };
                myChart.setOption({
                    series: [{
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }]
                });
            }
        };


        var labelOption = {
            normal: {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {
                        textBorderColor: '#ffff'
                    }
                }
            }
        };

        $(document).ready(function() {
            //班级通过率
            var param={
                operationCode:'BR16A',
                stamp:"qq",
                version: 0,
                visit_plat:0 ,
                visit_type:0 ,
                is_used:0
            }
            var systoken=sessionStorage.getItem('systoken');

            param = JSON.stringify(param);
            $.ajax({
                type:'post',
                async:false,
                url:path+"/PassingRate/getPassingRate",
                data:{param: param},
                dataType:'json',
                headers: {
                    Authorization: systoken
                },
                success:function(data){
                    var xA=[];
                    var yA=[];
                    var rule=[];
                    var consciousness=[];
                    var efficiency=[];
                    var conversation=[];

                    var data=data.rows;

                    for(var i=0;i<data.length;i++){



                        xA.push(data[i].className);
                        yA.push(data[i].rateList);

                        rule.push(yA[i][0])
                        consciousness.push(yA[i][1])
                        efficiency.push(yA[i][2])
                        conversation.push(yA[i][3])
                    }

                    myChart2 = echarts.init(document.getElementById('main'));
                    myChart = echarts.init(document.getElementById('main2'));
                    //折线图
                    var myChart = echarts.init(main2);
                    var app = {};
                    options = null;
                    options = {
                        title: {


                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {

                        },
                        toolbox: {
                            show: false,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView: {readOnly: false},
                                magicType: {type: ['line', 'bar']},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis:  {
                            type: 'category',
                            boundaryGap: false,
                            data:xA
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        },
                        series: [

                            {
                                name:'管制意识',
                                type:'line',
                                data:consciousness,

                            },
                            {
                                name:'管制效率',
                                type:'line',
                                data:efficiency,

                            },
                            {
                                name:'管制规则',
                                type:'line',
                                data:rule,

                            },
                            {
                                name:'管制通话',
                                type:'line',
                                data:conversation,

                            },

                        ]
                    };
                    //柱形图
                    //			通过率柱状图
                    //var xDataArr=['班级一','班级二'];//这里放的是后台返回的数据，如果不是这种纯班级的数组，就要封装push
                    //var yDataArr=['通过率值','通过率值'];//这里放置后台返回的数据，如果不是通过率数组则需要封装
                    var option = {
                        title: {
                            text: '班级通过率统计图'
                        },
                        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['Forest', 'Steppe', 'Desert', 'Wetland']
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: {show: false},
                                data: xA
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} %'
                                }
                            }
                        ],
                        series: [
                            {
                                name: '管制规则',
                                type: 'bar',
                                barGap: 0,
                                label: labelOption,
                                data: rule

                            },
                            {
                                name: '管制意识',
                                type: 'bar',
                                label: labelOption,
                                data: consciousness
                            },
                            {
                                name: '管制效率',
                                type: 'bar',
                                label: labelOption,
                                data: efficiency
                            },
                            {
                                name: '标准通话',
                                type: 'bar',
                                label: labelOption,
                                data: conversation
                            }
                        ]

                    };

                    myChart2.setOption(option);
                    myChart.setOption(options);
                }

            })



            var echartsWarp = document.getElementById('main');

            var resizeWorldMapContainer = function() { //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
                echartsWarp.style.width = $('#main').innerWidth + 'px';
                echartsWarp.style.height = $('#main').innerHeight + 'px';
            };

            resizeWorldMapContainer(); //设置容器高宽

            var myChart = echarts.init(echartsWarp);

            window.onresize = function() { //用于使chart自适应高度和宽度

                resizeWorldMapContainer(); //重置容器高宽
                myChart.resize();
            };
            window.addEventListener("resize", function() {
                myChart.resize();
            })
        });
	</script>
	<script type="text/javascript">
        //雷达图
        /*var paths='http://192.168.1.114:8083'
        $(document).ready(function() {
            //班级通过率
            var param = {
                "studentIds":[ '126b5b0ded50495ebd3504628cff872c'],
                "operationCodes": ['BR16A'] ,
                "stamp": 0,
                "version": 0,
                "visit_plat": 0,
                "visit_type": 0,
                "is_used":0

            }
            var systoken = sessionStorage.getItem('systoken');

            param = JSON.stringify(param);
            getCapbilityAttribute()

            function getCapbilityAttribute(){
            $.ajax({
                type: 'post',
                async: false,
                url: path + "/PassingRate/getCapabilityAttribute",
                data: {param: param},
                dataType: 'json',
                headers: {
                    Authorization: systoken
                },
                success: function (data) {

                    var xxA=[];
                    var yyA=[];
                    var data=data.rows;
                    for(var i=0;i<data.length;i++){
                        xxA.push(data[i].gradeArr);
                        yyA.push(data[i].studentName);

                    }
                    var main3 = document.getElementById("main3");
                    var myChart = echarts.init(main3);
                    var app = {};
                    option = null;
                    option = {
                        title: {
                            text: '雷达图'
                        },
                        tooltip: {},
                        legend: {

                        },
                        radar: {
                            // shape: 'circle',
                            name: {
                                textStyle: {
                                    color: '#fff',
                                    backgroundColor: '#999',
                                    borderRadius: 3,
                                    padding: [3, 5]
                                }
                            },
                            indicator: [
                                { name: '管制规则', max: 50},
                                { name: '管制意识', max: 50},
                                { name: '管制效率', max: 50},
                                { name: '标准通话', max: 50}
                            ]
                        },
                        series: [{
                            type: 'radar',
                            // areaStyle: {normal: {}},
                            data : [
                                {
                                    value :xxA[0],
                                    name : '张三'
                                },

                            ]
                        },{
                            type: 'radar',
                            // areaStyle: {normal: {}},
                            data : [
                                {
                                    value :[40,50,30,30],
                                    name : '李四'
                                },

                            ]
                        }
                        ]
                    };;
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                }
            })
            }
        })*/

	</script>
</body>

</html>